<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="checkAll">
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus v-model="task" @keyup.enter="addFn"/>
	</header>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
	export default {
		data(){
			return{
				task:''
			}
		},
		computed:{
			...mapState('todos',['list']),
			checkAll:{
            set(val){
				// this.$store.commit('check',val)
                this.check(val)
            },
            get(){
				return this.list.every(item => item.isDone)
            }
        }
		},
		methods:{
			...mapMutations('todos',['add','check']),
			addFn(){
				if(!this.task){
					return alert('请输入内容')
				}
				// this.$store.commit('add',this.task)
				this.add(this.task)
				this.task = ''
			}
		}
	}
</script>
